<script setup>
import {ref} from "vue";
import router from "@/router/index.js";
import {reqSendEmail, reqSendEmail4ForgetPassword} from "@/api/modules/email.js";
import {reqForgetPassword} from "@/api/modules/account.js";
import {md5} from "js-md5";
import {ElMessage} from "element-plus";
import Verifier from "@/utils/Verifier.js";
import CountDown from "@/components/count-down.vue";

const formModel = ref({
  email: '',
  code: '',
  newPassword: '',
  confirmPassword: ''
})
const formRef=ref()
const validateEmail=(rule,value, callback)=>{
  if (value===''){
    callback(new Error('请输入邮箱'))
  }else{
    if (!Verifier.checkEmail(value)){
      callback(new Error('邮箱格式不合法'))
    }else{
      callback()
    }
  }
}

// 校验二次密码
const validateConfirmPassword = (rule,value,callback) => {
  if (value === '') {
    callback(new Error('请输入确认密码'))
  } else if (value !== formModel.value.newPassword) {
    callback(new Error("两次输入的密码不一致"))
  } else {
    callback()
  }
}

// 校验规则
const formRule={
  email: [{ validator: validateEmail, trigger: 'blur' }],
  code: [{ required: true, message: '验证码不能为空', trigger: 'blur' },],
  newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' },],
  confirmPassword: [{ validator: validateConfirmPassword, trigger: 'blur' }],
}

// 跳转登录页
const toLoginPage = async () => {
  await router.push('/login')
}

// 发送邮箱验证码
const sendEmail=async ()=>{
  if (!isSendBtn){
    return
  }
  await formRef.value.validateField('email')
  await reqSendEmail4ForgetPassword(formModel.value.email)
  isSendBtn.value=false
}

const isSendBtn=ref(true)

const finalCountDown=()=>{
  isSendBtn.value=true
}
// 提交修改
const confirmSubmit=async (formEl)=>{
  await formEl.validate()
  const reqParams=JSON.parse(JSON.stringify(formModel.value))
  reqParams.newPassword=md5(reqParams.newPassword)
  reqParams.confirmPassword=md5(reqParams.confirmPassword)
  await reqForgetPassword(reqParams)
  ElMessage.success('修改密码成功,2s后跳转到登陆页面')
  setTimeout(()=>{
    router.push('/login')
  },2000)
}
</script>

<template>
  <el-form label-width="100" :model="formModel" :rules="formRule" ref="formRef">
    <el-form-item>
      <template #label>
        <div style="text-align: center;font-size: 20px;font-weight: 700">
          <span>找回密码</span>
        </div>
      </template>
    </el-form-item>
    <el-form-item label="验证邮箱" style="color: #ffffff" prop="email">
      <el-input v-model="formModel.email"></el-input>
    </el-form-item>
    <el-form-item label="邮箱验证码" prop="code">
      <div style="display: flex;">
        <el-input v-model="formModel.code"></el-input>
        <el-button type="primary" plain style="margin-left: 10px;flex: 1" @click="sendEmail">
          <span v-if="isSendBtn">发送验证码</span>
          <count-down v-else :title="60" @final="finalCountDown"></count-down>
        </el-button>
      </div>
    </el-form-item>
    <el-form-item label="新密码" prop="newPassword">
      <el-input v-model="formModel.newPassword" show-password></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input v-model="formModel.confirmPassword" show-password></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="success" style="width: 100%" @click="confirmSubmit(formRef)">提交</el-button>
    </el-form-item>
    <el-form-item>
      <template #label>
        <span style="color: black;cursor: pointer" @click="toLoginPage">去登陆</span>
      </template>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
.el-form {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #ffffff;
  width: 400px;
  transform: translate(-50%, -50%);
}

.title {
  height: 50px;
  font-size: 20px;
}
</style>
